
<template>
    <div class="grid-card">
        <div class="grid-card-header" style="height: 60px;">
            <span>{{title}} &nbsp;&nbsp;&nbsp;&nbsp;切换用户: <span
                    style="display:inline-block;margin-left:10px;width:180px;margin-top: 10px;">
                <lar-field-select v-model="user" :fieldMulti="ifall" action="search"
                                  :fieldLink="selectLink"></lar-field-select>
            </span></span>
        </div>
        <div class="grid-card-body">
        <div class="grid-content bg-purple itmeborder">
            <ul class="pricebox">
              <li class="payicon">有效订单</li>
              <li class="pricenum">
                  <span>9</span>
                   <span class="rise">17.1
                       <i class="el-icon-caret-bottom" v-if="dd"></i>
                       <i class="el-icon-caret-top"></i></span>
              </li>
              <li>
                <Lines class="showlines"/>
              </li>
             </ul>

        </div>

        <div class="grid-content bg-purple-light itmeborder">
            <ul class="pricebox">
              <li class="payicon">订单总额</li>
              <li class="pricenum">
                <span>9</span>
                <span class="rise">17.1
                    <i class="el-icon-caret-bottom" v-if="dd"></i>
                    <i class="el-icon-caret-top"></i></span>
              </li>
              <li>
                <Lines class="showlines"/>
              </li>
             </ul>

        </div>
        <div class="grid-content bg-purple itmeborder">
         <ul class="pricebox">
              <li class="payicon">新用户扩展数量</li>
              <li class="pricenum">
                  <span>9</span>
                   <span class="rise">17.1
                       <i class="el-icon-caret-top"></i>
                   <i class="el-icon-caret-top" v-if="dd"></i></span>
              </li>
              <li>
                <Lines class="showlines"/>
              </li>
             </ul>
            </div>
        <div class="grid-content bg-purple-light itmeborder clearline">
          <ul class="pricebox">
              <li class="payicon">订单取消</li>
              <li class="pricenum">
                  <span>9</span>
                   <span class="rise">17.1
                       <i class="el-icon-caret-bottom"></i>
                       <i class="el-icon-caret-top" v-if="dd"></i></span>
              </li>
              <li>
                <Lines class="showlines"/>
              </li>
              </ul >
            </div>
       <div class="grid-content bg-purple-light itmeborder clearline">

              <ul class="pricebox">
              <li class="payicon">满意度</li>
              <li class="pricenum">
                  <span>95%</span>
                   <span class="rise">17.1
                       <i class="el-icon-caret-bottom"></i>
                       <i class="el-icon-caret-top" v-if="dd"></i></span>
              </li>
              <li>
                <Lines class="showlines"/>
              </li>
              </ul >
            </div>
        </div>
    </div>
</template>

<script>
import { Row, Col, Icon } from "element-ui";
import Lines from "../../chart/Lines.vue";
import base from "../base.js";
export default {
  extends: base,
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
     Lines
  },
  name: "recent-data",
  props: {},
  data() {
    return {
        selectLink: {
            url: "/common/user/admin",
            select: ["id", "name", "phone"]
        },
        user: null,
        dd:false
    };
  }
};
</script>

<style scoped lang="less">
.grid-card {
  width: 100%;
  padding-bottom: 20px;
  min-width: 300px;
  .grid-card-header {
    height: 43px;
    line-height: 43px;
    padding: 0 30px;
    border-bottom: 1px solid #f6f6f6;

    border-radius: 2px 2px 0 0;
    font-size: 16px;
    color: #000;
  }
  .grid-card-body {
      display: flex;
      justify-content: space-around;
      text-align: center;
    .itmeborder {
      /*height: 100px;*/
      padding: 0 20px;
      display: flex;

      .pricebox {
        margin-left: 8px;
        margin-top: 25px;
        .payicon {
          font-size: 14px;
          color: #9b9b9b;
        }
        .pricenum {
          font-size: 30px;
          color: black;
          margin-top: 21px;
          .rise {
            font-size: 26px;
            color: #9b9b9b;
            margin-left: 15px;
          }
        }
      }
    }
  }
}
/*@media screen and (max-width: 1235px) {*/
  /*.grid-card {*/
    /*.pricebox {*/
      /*margin-left: 8px !important;*/
      /*.pricenum {*/
        /*font-size: 25px !important;*/
        /*.rise {*/
          /*font-size: 18px !important;*/
          /*margin-left: 2px !important;*/
        /*}*/
      /*}*/
    /*}*/
  /*}*/
  /*.grid-card .grid-card-body .itmeborder {*/
    /*padding: 0 5px !important;*/
  /*}*/
/*}*/
@media screen and (max-width: 1400px) {
  .grid-card {
    .pricebox {
      margin-left: 8px !important;
      .pricenum {
        .rise {
          margin-left: 2px !important;
        }
      }
    }
   .showlines{
       display: none;
   }
  }
  .grid-card .grid-card-body .itmeborder {
    padding: 0 5px !important;
  }

}
</style>
